<!--订单首页-->
<style scoped lang="less">
    .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
    height: auto;
}
    .swiper-container {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.order-list .list-order-warp .con .msg{
    width: 5.5rem;
}
.tml-header {
    background: #fff;
    overflow: hidden;
}
.th-list {
    margin-right: -1px;
    height: auto !important;
}
.th-list li {
  width: 93.75px;
    text-align: center;
    color: #ff7202;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
    margin: 15px 0;
}
    .th-list li .iconfont {
      color: #ff7202;
      font-size: 26px;
      line-height: 30px;
  }
  .th-list li .txt {
    color: #333;
}
  .icon-sign:before {
    content: "\e681";
}

.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}


.contain{
  padding:0;
}
.gridbg {
  background-color: #fefefe;
}
.order-list {
  .todo {
    height:0.86rem; 
    line-height:0.86rem; 
    padding:0 0.2rem;
    .tag {
      height:0.56rem;
      line-height: 0.56rem;
      padding:0 0.2rem;
      margin-left: 0.1rem;
      background:#ff7202;
      color:#fff;
      border-radius: 0.28rem;
    }
  }
  .list-order-warp{
    background: #fff;
    .title {
      padding:10px;
      color:#888;
      font-size:14px; 
      border-bottom:1px solid #ebebeb;
    }
    .con {
      padding: 0.1rem 0.2rem;
      border-bottom: 1px solid #ebebeb;
      .cargo {
        margin: 0.1rem;
        height: 1.3rem;
        width:1.3rem;
        text-align: center;
        border-radius: .08rem;
        background: #edf8f8;
        overflow: hidden;
        i {
          display: block;
          height: 1rem;
          line-height: 1rem;
          font-size: .6rem;
          color: #77babd;
        }
        p {
          height: .3rem;
          line-height: .3rem;
          font-size: .2rem;
          color: #fff;
          background: #77babd;
        }
      }
      .msg {
        margin-left:0.2rem;
        font-size:13px;
        line-height: 0.5rem;
        width: 5.5rem;
      }
    }
    .btn-grp {
      padding:0.1rem 0.2rem 0.1rem 0;
      text-align: right;
      .btn{
        margin-left: 0.1rem;
      }
    }  
  }
}
</style>

<template>
  <div class="contain order-list">
    <manage-header></manage-header>

     <div class="tml-header swiper-container">
      <ul class="th-list cf swiper-wrapper" style="height: 49px;">
        <li class="swiper-slide" v-on:click="deliveryAndHandover()" style="width: 51%;">
          <div class="iconfont icon-complete"></div>
          <div class="txt">提货交接</div>
        </li>
        <li class="swiper-slide" v-on:click="associatedEquipment()" style="width: 50%;">
          <div class="iconfont icon-take-delivery"></div>
          <div class="txt">关联设备</div>
        </li>
        <!-- <li class="swiper-slide" >
          <div class="iconfont icon-storage"></div>
          <div class="txt">冷链装箱</div>
        </li>
        <li class="swiper-slide">
          <div class="iconfont icon-sign"></div>
          <div class="txt">签收</div>
        </li> -->
        <!-- <li class="swiper-slide"> 
          <div class="iconfont icon-return-goods"></div>
          <div class="txt">退货确认</div>
        </li> -->
      </ul>
      <div class="swiper-pagination" v-show="paged"></div>
    </div>
    
    <div class="todo">
      待交接委托三方订单<span class="tag">{{totalRecords}}</span>
    </div>

    <scroller lock-x scrollbar-y use-pullup height="-228" ref="Scroller" :pullup-config="ScrollerConfig" :auto-fill="false" @on-pullup-loading="getData" v-if="todolist.length>0" style="height:490px;">
      <div>
        <div class="list-order-warp mb30" v-for="item in todolist">
          <div class="title">
            业务单号：{{item.BBillNo}}
            <!-- {{item.State | PoState}} -->
            <!-- <em class="org f-r ft12">{{item.State | PoState}}</em> -->
          </div>
          <div class="displayflex con" v-on:click="goToDetail(item.Guid)">
            <span class="cargo">
              <i class="iconfont icon-cargo"></i>
              <p>{{item.Pkgs}}件</p>
            </span>
            <div class="msg">
              <p>起运时间：{{item.DepartureDate | time}}</p>
              <p>起运地：{{item.DepartureProvince | province}}{{item.DepartureCity | city}}{{item.DepartureDistrict | district }}{{item.DepartureAddress}}</p>
              <p>目的地：{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district }}{{item.ArrivalAddress}}</p>
              <p style="border-bottom: 1px dashed #ebebeb">收货单位：{{item.SaleCorpName}}</p>
              <p>承运商：{{item.DeliverName}}</p>
              <p>物流单号：{{item.TPLPoNo}}</p>
            </div>
          </div>
          <div class="btn-grp">
            <div class="btn" v-on:click="goToDetail(item.Guid)">详情</div>
            <template v-if="!item.Information">
              <div class="btn" v-on:click="goToPath('/orderNumberQuery?guid='+item.Guid)" v-if="tabNo == 1">确认交货</div>
              <div class="btn" v-if="tabNo == 1">扫码交货</div> <!--  v-on:click="goToPath('/order/progress', item, 3)" -->
              <!-- <div class="btn" v-on:click="goToPath(item, 5)" v-if="item.State * 1 === 11">受理</div> -->
            </template>
          </div>
        </div> 
        <div v-if="noMore" class="loader-over" style="height: 150px;">没有更多记录了</div>
      </div>
    </scroller>

    <div class="noDate_page" v-if="todolist.length <= 0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>

    <manage-footer :status="1"></manage-footer>
  </div>
</template>

<script>
import manageFooter from "@/components/core/footer/manage.footer.vue";
import manageHeader from "@/components/core/header/manage.header.vue";
export default {
  name: "orderIndex",
  components: {
    manageFooter,
    manageHeader
  },
  data() {
    return {
      todolist:[],
      paged:false,
      tabNo:1,

      totalRecords:0,
      PageIndex:1,
      PageSize:4,
      noMore:false,
      ScrollerConfig:{
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      },
    };
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : null;
    }
  },
  created() {
    console.log(this.userinfo);
    this.getData();
  },
  mounted() {
    this.$nextTick(function() {
    });
  },
  methods: {
    getData() {
      let query = {
          StateList: ['41'],
          ExceptionMark: "N",
          TenantGuid: this.userinfo.TenantGuid,
          CargoOwnerGuid: this.userinfo.BelongGuid,
          PageIndex: this.PageIndex,
          PageSize: this.PageSize,
          ResourceSource:2
        };
      this.Ajax.post('GetCargoOwnerOrderList',query).then((res) => {
        if (res.IsSuccess) {
          this.totalRecords = res.TotalRecords; 
          if(res.Datas && res.Datas.length > 0){
            this.PageIndex++;
            this.todolist = this.todolist.concat(res.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      }).catch((err) => {
        this.Toast({
            message: err.toString(),
        });
      });
    },
    goToPath(url, item, type){
      let query = {};

      //订单详情
      if(type === 1){
        query = {
          BBGuid: item.Guid,
        }
      }
      //订单进度
      if(type === 2){
        query = {
          BBGuid: item.Guid,
          MainPoGuid: item.MainPoGuid,
          tabNo: 1
        }
      }
      //配送详情
      if(type === 3){
        query = {
          BBGuid: item.Guid,
          MainPoGuid: item.MainPoGuid,
          tabNo: 2
        }
      }

      //配送详情
      if(type === 4){
        query = {
          BBGuid: item.Guid,
        }
      }

      this.$router.push({
        path: url,
        query: query,
      })

    },
    deliveryAndHandover(){
      this.$router.push({
        path:'/takeDeliveryOrde',
        query:{
        }
      })
    },
    associatedEquipment(){
      this.$router.push({
        path:'/associatedEquipment',
        query:{
        }
      })
    },
    goToDetail(guid){
      this.$router.push({
        path:'/order/orderDetail',
        query:{
          BBGuid: guid,
        }
      })
    },
    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
};
</script>
